// 事件委托给装button的容器
let operate = document.querySelector('.operate');
// 获取财富榜的ul
let richlist = document.querySelector('.richlist');
// 生成索引 辅助渲染每条数据
let index = 0;
// 绑定事件
operate.addEventListener('click', function (e) {
  // 通过target判断点击的是哪个按钮
  let target = e.target;
  // 添加账户
  if (target.className === 'add') {
    richlist.innerHTML += `<li><p>${dataInfo[index].name}</p><p>$<span>${dataInfo[index].money}</sapn></p></li>`;
    formatMoney();
    index++;
    if (index === dataInfo.length) target.disabled = true;
  }
  // 资金翻倍
  if (target.className === 'double') {
    revertMoney();
    let moneylist = document.querySelectorAll('.richlist span');
    moneylist.forEach((ele) => {
      let newMoney = Number(ele.innerHTML) * 2;
      ele.innerHTML = newMoney;
    });
    formatMoney();
  }
  // 查询百万富翁
  if (target.className === 'search') {
    revertMoney();
    let moneylist = document.querySelectorAll('.richlist span');
    moneylist.forEach((ele) => {
      if (Number(ele.innerHTML) < 1000000) {
        ele.parentNode.parentNode.remove();
      }
    });
    formatMoney();
  }
  // 财富榜排序
  if (target.className === 'rank') {
    revertMoney();
    let wealthArr = [...document.querySelectorAll('.richlist li')];
    wealthArr.sort((a, b) => {
      return (
        b.childNodes[1].lastChild.textContent -
        a.childNodes[1].lastChild.textContent
      );
    });
    wealthArr.forEach((ele) => {
      richlist.append(ele);
    });
    formatMoney();
  }
  // 计算总额
  if (target.className === 'total') {
    revertMoney();
    let richrank = document.querySelector('.richrank');
    let moneylist = document.querySelectorAll('.richlist span');
    let totalWealth = 0;
    moneylist.forEach((ele) => {
      totalWealth += Number(ele.innerHTML);
    });
    richrank.innerHTML += `<div class="title-total">
    <p class="title-left">Total Num:</p>
    <p class="title-right">$<span>${totalWealth}</span></p>
  </div>`;
    formatMoney();
    // 格式化总额
    let totalMoney = document.querySelector('.title-right span');
    let formatTotalMoney = fmoney(`${totalMoney.innerHTML}`, 2);
    totalMoney.innerHTML = formatTotalMoney;
  }
});

// 获取导航栏
let nav = document.querySelector('.nav');
// 获取导航栏按钮
let navBtn = document.querySelector('.nav-btn');
// 给导航栏按钮绑定点击事件
navBtn.onclick = () => {
  if (nav.classList.contains('show')) {
    nav.classList.remove('show');
  } else {
    nav.classList.add('show');
  }
};

// 封装一个格式化数字的函数
let formatMoney = () => {
  let fmoneylist = document.querySelectorAll('.richlist span');
  console.log(fmoneylist);
  fmoneylist.forEach((ele) => {
    let fmtMoney = fmoney(`${ele.innerHTML}`, 2);
    ele.innerHTML = fmtMoney;
  });
};
// 封装一个还原格式化数字的函数
let revertMoney = () => {
  let rmoneylist = document.querySelectorAll('.richlist span');
  rmoneylist.forEach((ele) => {
    let rvtMoney = rmoney(`${ele.innerHTML}`);
    ele.innerHTML = rvtMoney;
  });
};
// 格式化
function fmoney(s, n) {
  n = n > 0 && n <= 20 ? n : 2;
  s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';
  var l = s.split('.')[0].split('').reverse(),
    r = s.split('.')[1];
  t = '';
  for (i = 0; i < l.length; i++) {
    t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? ',' : '');
  }
  return t.split('').reverse().join('') + '.' + r;
}
// 还原
function rmoney(s) {
  return parseFloat(s.replace(/[^\d\.-]/g, ''));
}
